<template>
  <div class="app-container">
    <el-form class="alone-business" :model="query" ref="queryBusinessRef" :inline="true">
      <div class="form-conditions">
        <el-form-item label="所在城市">
          <el-cascader
            v-model="query.areaId"
            :options="area"
            :props="{ label: 'name', value: 'id' }"
            placeholder="请选择公司区域"
            @change="areaChange"
          />
        </el-form-item>

        <el-form-item label="商家名称">
          <el-input v-model="query.tenantName" placeholder="请输入" clearable></el-input>
        </el-form-item>

        <el-form-item label="原展厅名称">
          <el-input v-model="query.oldShowroomName" placeholder="请输入" clearable></el-input>
        </el-form-item>
        <el-form-item label="更换后展厅名称">
          <el-input v-model="query.newShowroomName" placeholder="请输入" clearable></el-input>
        </el-form-item>
        <el-form-item label="更换原因">
          <el-select v-model="query.reason" placeholder="请选择" clearable style="width: 193px">
            <el-option v-for="dict in options" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
      </div>
      <div class="form-buttons">
        <el-form-item>
          <el-button type="primary" icon="Search" @click="searchData">搜索</el-button>
          <el-button icon="Refresh" @click="reset">重置</el-button>
        </el-form-item>
      </div>
    </el-form>

    <el-table v-loading="tableLoading" :data="tableData" highlight-current-row style="width: 100%; margin-top: 20px">
      <el-table-column property="tenantName" label="商家名称" width="250"></el-table-column>
      <el-table-column property="areaName" label="所在城市"></el-table-column>
      <el-table-column property="oldShowroomName" label="原展厅"></el-table-column>
      <el-table-column property="oldShowroomTenantName" label="原展厅所属租户"></el-table-column>
      <el-table-column property="newShowroomName" label="更换后展厅" width="120"></el-table-column>
      <el-table-column property="newShowroomTenantName" label="更换后展厅所属租户"></el-table-column>
      <el-table-column property="reason" label="更换原因">
        <template #default="scope">
          {{ getLabelByValue(scope.row.reason) }}
        </template>
      </el-table-column>
      <el-table-column property="remark" label="备注说明"></el-table-column>
      <el-table-column property="unbindTime" label="更换时间"></el-table-column>
    </el-table>

    <pagination :total="listTotal" v-model:page="query.current" v-model:limit="query.size" @pagination="searchData" />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { getArea } from "@/api/tenant";
import { getShowroomchange } from "@/api/system/rebateRules/protocol";
const { proxy } = getCurrentInstance();
const { sys_yes_no } = proxy.useDict("sys_yes_no");
const query = ref({
  current: 1,
  size: 10
});
const options = [
  {
    value: 1,
    label: "环境差"
  },
  {
    value: 2,
    label: "上样商品不全"
  },
  {
    value: 3,
    label: "其他"
  }
];
const tableLoading = ref(false);
const tableData = ref([]);
const listTotal = ref(0);
const area = ref([]);
const getLabelByValue = value => {
  const option = options.find(opt => opt.value == value);
  return option ? option.label : "未知原因"; // 如果没有找到，则返回默认内容
};
const getAreaList = () => {
  getArea().then(res => {
    area.value = res.data;
  });
};
// 改变地址
const areaChange = value => {
  query.value.areaId = value[2];
};
// 查询
const searchData = () => {
  pageListJudge();
};

// 搜索重置
const reset = () => {
  query.value = {
    current: 1,
    size: 10
  };
  pageListJudge();
};

const pageListJudge = async () => {
  const { code, data } = await getShowroomchange(query.value);
  if (code == 200) {
    tableData.value = data.records;
    listTotal.value = data.total;
  }
};
getAreaList();
pageListJudge();
</script>
<style scoped>
.alone-business {
  display: flex;
  flex-direction: column;
}

.form-conditions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px; /* 间距随需求调整 */
}

.form-buttons {
  margin-top: 10px; /* 按需调整 */
}
</style>
